---
title: "Toolbar"
description: A compact UI container that groups multiple actions, controls, or tools for quick access and improved workflow efficiency.
order: 3
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Toolbar.html#props"]
---


## Basic
This basic example highlights the most common use cases for a toolbar.
<How toUse="controls/toolbar/toolbar-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/toolbar
```

## Composed components
<Composed components={['toggle', 'separator']}/>

## Manual installation
```bash
npm i react-aria-components tailwind-merge
```

<SourceCode toShow='toolbar'/>

## Anatomy
```
import { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator } from "@/components/ui/toolbar"
```
```
<Toolbar>
  <ToolbarGroup>
    <ToolbarItem />
    <ToolbarItem />
    <ToolbarItem />
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarGroup>
    <ToolbarItem />
  </ToolbarGroup>
</Toolbar>
```

## Orientation
By default, the toolbar is displayed horizontally. You can change it to vertical using the `orientation` prop.
<How toUse="controls/toolbar/toolbar-orientation-demo" />

## Disabled
You can disable a toolbar either as a group or individually by using the `isDisabled` prop.
<How toUse="controls/toolbar/toolbar-disabled-demo" />
